<template>

    <div class="tabbar-item-container" @click="changePath">
        <div class="tabbar-item-img">
            <slot v-if="showActive" name="img-active"></slot>
            <slot v-else name="img"></slot>
        </div>
        <div class="tabbar-item-title" :class="showActive?'tabbar-item-title-active':'tabbar-item-title'">
            <slot name="title"></slot>
        </div>
    </div>   
    
</template>

<script>
export default {
    props:{
        path:{
            type:String,
            require:true,
        }
    },
    computed:{
        showActive:function(){
            return this.$route.path===this.path;
        },
        showActive(){
            return this.path===this.$route.path
        }
    },
    methods:{
        changePath(){
            if(this.$route.path!=this.path){
                     this.$router.push(this.path)
            }
           
        }
    }
}
</script>

<style scoped>
*{
    margin:0;
    padding:0;
}
.tabbar-item-container{
    width:15%;
    height:100%;
    /* border:1px solid red; */
     display: inline-flex;
    justify-content:center;
    align-items:center;
    flex-wrap: wrap;
}
.tabbar-item-img img{
    width:1.3rem;
    height:1.3rem;
}
.tabbar-item-title{
    color:black;
    font-size:0.67rem;
}
.tabbar-item-title-active{
    color:red;
    font-size:0.67rem;
}
</style>